<template>
	<div class="login">
     <div class="container">	  
	    <div class="form-box" :style="formBoxStyle">
	      <el-form v-show="isRegister" class="register-box" :model="registerForm" :rules="registerRules" status-icon ref="formregister">
	        <h1>用户注册</h1>
	        <el-form-item prop="phone" v-if="!bindemail">
	          <el-input v-model="registerForm.phone" name="phone" placeholder="手机号" />
	        </el-form-item>
	        <el-form-item prop="password" v-if="!bindemail">
	          <el-input class="input-style" type="password" v-model="registerForm.password" name="password" placeholder="密码" />
	        </el-form-item>
	        <el-form-item prop="confirmPwd" v-if="!bindemail">
	          <el-input class="input-style" type="password" v-model="registerForm.confirmPwd" name="confirmPwd" placeholder="确认密码" />
	        </el-form-item>
          <el-form-item prop="email" v-if="bindemail">
            <el-input v-model="registerForm.email" name="email" placeholder="邮箱" />
          </el-form-item>
          <div style="display: flex;">
            <el-form-item prop="verifyCode" v-if="bindemail" style="width: 50%;margin-left: 50px;">
              <el-input v-model="registerForm.verifyCode" name="verifyCode" placeholder="验证码"/>
            </el-form-item>
            <el-link @click="bindVerifyCode()" v-if="bindemail"  :underline='false'>发送验证码</el-link>
          </div>
          <el-button type="primary" @click="register" v-if="bindemail" style="width: 65%;">注册</el-button>
	        <el-button type="primary" @click="gobindemail" v-if="!bindemail" style="margin-top: 10px;">去绑定邮箱</el-button>
	      </el-form>
	      <el-form v-show="!isRegister&&!isForget" class="login-box" :model="loginForm" :rules="loginRules" status-icon ref="formlogin">
	        <h1>用户登录</h1>
	        <el-form-item  prop="phone">
	          <el-input class="input-style" v-model="loginForm.phone" name="phone" placeholder="手机号" />
	        </el-form-item>
	        <el-form-item  prop="password">
	          <el-input class="input-style" type="password" v-model="loginForm.password" name="password" placeholder="密码" />
	        </el-form-item>
	        <el-button type="primary" @click="login()">登录</el-button>
	        <el-link   style="margin: 18px;"@click="goForget()">忘记密码</el-link>
	      </el-form>
        <!-- 忘记密码表单 -->
        <el-form v-show="isForget" class="forget-box" :model="forgetForm" :rules="forgetRules" status-icon ref="formforget">
          <h1>忘记密码</h1>
          <el-form-item prop="email" v-if="!isSuccessSend">
            <el-input v-model="forgetForm.email" name="email" placeholder="邮箱" />
          </el-form-item>
          <div style="display: flex;">
            <el-form-item prop="verifyCode" v-if="!isSuccessSend">
              <el-input v-model="forgetForm.verifyCode" name="verifyCode" placeholder="验证码"/>
            </el-form-item>
            <el-link @click="sendVerifyCode()" v-if="!isSuccessSend"  :underline='false'>发送验证码</el-link>
          </div>
          <el-button type="primary" @click="VerifyCode()" v-if="!isSuccessSend" style="margin-left: 50px;width: 65%;">确定</el-button>

          <el-form-item prop="newPassword" v-if="isSuccessSend">
            <el-input class="input-style" type="password" v-model="forgetForm.newPassword" name="newPassword" placeholder="新密码" />
          </el-form-item>
          <el-form-item prop="confirmNewPwd" v-if="isSuccessSend">
            <el-input class="input-style" type="password" v-model="forgetForm.confirmNewPwd" name="confirmNewPwd" placeholder="确认新密码" />
          </el-form-item>
          <el-button type="primary" @click="resetPassword()" v-if="isSuccessSend" style="margin-left: 30px;width: 65%;">重置密码</el-button>
        </el-form>
	    </div>
	  
      <div v-show="isRegister||isForget" class="con-box left" >
		  <img src="./img/login1.png" style="width: 200px;"/>
        <p>已有账号!</p>
        <button id="login" @click="goLogin()">去登录</button>
      </div>
      <div v-show="!isRegister" class="con-box right" >
		  <img src="./img/login1.png" style="width: 200px;"/>
        <p>没有账号？</p>
        <button id="register" @click="goRegister()">去注册</button>
      </div>
    </div>		
</div>

</template>

<script setup>
import router from '@/router';
import { post,get} from '@/plugins/axios';
import { ElForm, ElMessage } from 'element-plus';
import {ref,reactive} from 'vue'
import VueCookie from 'vue-cookie';
const isRegister = ref(false); // 控制显示登录还是注册
const bindemail = ref(false); // 控制显示绑定邮箱
const formBoxStyle = ref({ transform: 'translateX(0%)' }); // 控制表单盒子的X轴偏移
const formlogin = ref()
const formregister = ref()
const registerForm = ref({
  phone: '',
  email:'',
  verifyCode: '',
  password: '',
  confirmPwd: '',
  role: '2'
});
const loginForm = ref({
  phone: '',
  password: ''
});
const loginRules = {
  phone: [
    { required: true, message: '请输入手机号', trigger: 'blur' },
    { pattern: /^1[3456789]\d{9}$/, message: '手机号格式错误', trigger: 'blur' }
  ],
  password: [
    { required: true, message: '请输入密码', trigger: 'blur' },
    { min: 5, message: '密码长度不能小于5位', trigger: 'blur' }
  ]
};
const registerRules = {
  phone: [
    { required: true, message: '请输入手机号', trigger: 'blur' },
    { pattern: /^1[3456789]\d{9}$/, message: '手机号格式错误', trigger: 'blur' },
    { validator: check,message:'手机号已占用',trigger: 'blur' }
  ],
  email: [
    { required: true, message: '请输入邮箱', trigger: 'blur' },
    { type: 'email', message: '邮箱格式错误', trigger: 'blur' },
    { validator: check,message:'邮箱已占用',trigger: 'blur' }
  ],
  verifyCode: [
    { required: true, message: '请输入验证码', trigger: 'blur' }
  ],
  password: [
    { required: true, message: '请输入密码', trigger: 'blur' },
    { min: 5, message: '密码长度不能小于5位', trigger: 'blur' }
  ],
  confirmPwd: [
    { required: true, message: '请再次输入密码', trigger: 'blur' },
    { validator: validateConfirmPwd, trigger: 'blur' }
  ]
};
function check(rule,value,callback){
	get("/tUser/check",{id:null,value,field:rule.field},res=>{
    console.log(res)
		if(res){
			callback();
		}
		else{
			callback(new Error());
		}
	})
}
function validateConfirmPwd(rule, value, callback) {
  if (value !== registerForm.value.password) {
    callback(new Error('两次输入的密码不一致'));
  } else {
    callback();
  }
}
function goRegister() {
	isRegister.value = true;
  isForget.value = false;
	formBoxStyle.value.transform = 'translateX(80%)'; // 负值表示向左滑动
  registerForm.value.email = '';
  registerForm.value.phone = '';
  registerForm.value.password = '';
  registerForm.value.confirmPwd = '';
  registerForm.value.verifyCode = '';

}

function goLogin() {
  isRegister.value = false;
  isForget.value = false;
  isSuccessSend.value = false;
  bindemail.value = false;
  formBoxStyle.value.transform = 'translateX(0%)';
  loginForm.value.phone = '';
  loginForm.value.password = '';
}
function goForget(){
	isRegister.value = false;
  isForget.value = true;
  formBoxStyle.value.transform = 'translateX(80%)';
  forgetForm.value.email = '';
  forgetForm.value.verifyCode = '';
  forgetForm.value.newPassword = '';
  forgetForm.value.confirmNewPwd = '';
}
const validateField = (field) => {
  return new Promise((resolve, reject) => {
    formregister.value.validateField(field, (valid) => {
      if (valid) {
        resolve();
      } else {
        reject();
      }
    });
  });
};

const gobindemail = async () => {
  try {
    await validateField('phone');
    await validateField('password');
    await validateField('confirmPwd');
    bindemail.value = true;
  } catch (error) {
    ElMessage.error('请填写当前信息');
  }
};

function login() {
  try {
    post("/tUser/login",loginForm.value, content => {
		if (content) {
		VueCookie.set('token', content)
      router.push({ name:"Indexmain" })
			callback()
			window.location.reload()
		} else {
			callback(new Error('用户不存在'))
		}
	},formlogin)
  } catch (error) {
  }
}
function bindVerifyCode(){
  post("/tUser/sendVerificationCode", { email: registerForm.value.email }, content => {
    if (content) {
      ElMessage.success('验证码发送成功');
    } else {
      ElMessage.error('验证码发送失败');
    }
  })
}
function register() {
  try {
    post("/tUser/verifyCode", { email: registerForm.value.email, code: registerForm.value.verifyCode }, content => {
    if (content) {
      post("/tUser/register", registerForm.value, content => {
      if (content) {
        goLogin()
        ElMessage.success('注册成功')
        callback()
      } else {
        callback(new Error())
      }
	},formregister)
    } else {
      ElMessage.error('验证失败');
    }
  },formregister)  
  } catch (error) {
  }
}


//添加忘记密码相关内容
const isForget = ref(false); // 控制显示忘记密码表单
const isSuccessSend = ref(false); // 控制是否发送验证码成功
const formforget = ref();

const forgetForm = ref({
  email: '',
  verifyCode: '',
  newPassword: '',
  confirmNewPwd: ''
});

const forgetRules = {
  email: [
    { required: true, message: '请输入邮箱', trigger: 'blur' },
    { type: 'email', message: '邮箱格式错误', trigger: 'blur' }
  ],
  verifyCode: [
    { required: true, message: '请输入验证码', trigger: 'blur' }
  ],
  newPassword: [
    { required: true, message: '请输入新密码', trigger: 'blur' },
    { min: 5, message: '密码长度不能小于5位', trigger: 'blur' }
  ],
  confirmNewPwd: [
    { required: true, message: '请再次输入密码', trigger: 'blur' },
    { validator: validateConfirmNewPwd, trigger: 'blur' }
  ]
};

function sendVerifyCode() {
  post("/tUser/sendVerificationCode", { email: forgetForm.value.email }, content => {
    if (content) {
      ElMessage.success('验证码发送成功');
    } else {
      ElMessage.error('验证码发送失败');
    }
  })
}
function VerifyCode(){
  post("/tUser/verifyCode", { email: forgetForm.value.email, code: forgetForm.value.verifyCode }, content => {
    if (content) {
      ElMessage.success('验证成功');
      isSuccessSend.value = true;
    } else {
      ElMessage.error('验证失败');
    }
  },formforget)
}
function resetPassword() {
  post("/tUser/resetPassword", forgetForm.value, content => {
    if (content) {
      ElMessage.success('重置密码成功');
      isSuccessSend.value = false;
      goLogin();
    } else {
      ElMessage.error('重置密码失败');
    }
  },formforget)
}

function validateConfirmNewPwd(rule, value, callback) {
  if (value !== forgetForm.value.newPassword) {
    callback(new Error('两次输入的密码不一致'));
  } else {
    callback();
  }
}
</script>

<style lang="scss" scoped>
$containercolor: #f39d33;
	.login{
		height: 100vh;
		display: flex;
		background-image: url('./img/bg.jpg');
		background-size: cover;
		// // background-attachment: fixed;
		background-position: center;
		background-repeat: no-repeat;
		// // 	  height: 100vh;
		//background: linear-gradient(200deg, #d2d2ff, #e4fcff);;
		
	}
  .container {
    background-color: #fdf7ee;
    width: 650px;
    height: 415px;
    border-radius: 5px;
    box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.1);
    position: relative;
    margin: auto;
  }

  .form-box {
    position: absolute;
    top: -10%;
    left: 5%;
    background-color: #f8c27f;
    width: 320px;
    height: 500px;
    border-radius: 5px;
    box-shadow: 2px 0 10px rgb(219, 220, 216);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 2;
    transition: 0.5s ease-in-out;
  }

  .register-box,
  .login-box {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
  }
  h1 {
    text-align: center;
    margin-bottom: 50px;
    color: #fff;
    letter-spacing: 5px;
    font-family: "宋体";
  }

  .el-input {
    --el-input-bg-color: transparent;
    --el-input-border-color: transparent;
    --el-input-focus-border-color: $containercolor;
    --el-input-hover-border-color: $containercolor;
	--el-input-placeholder-color: #fcead5;

    border-bottom: 1px solid rgba(255, 255, 255, 0.8);
    padding: 10px 0;
    text-indent: 10px;
    font-size: 15px;
  }
  .form-box button {
    width: 70%;
    margin-top: 35px;
    background-color: #f6f6f6;
    outline: none;
    border-radius: 8px;
    padding: 13px;
    color: $containercolor;
    letter-spacing: 2px;
    border: none;
    cursor: pointer;
  }

  .form-box button:hover {
    background-color: $containercolor;
    color: #f6f6f6;
    transition: background-color 0.5s ease;
  }

  .con-box {
    width: 50%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
  }
  .con-box.left {
    left: -2%;
  }
  .con-box.right {
    right: -2%;
  }
  
  .con-box p {
    font-size: 16px;
    letter-spacing: 2px;
    color: #697281;
    text-align: center;
	margin-top: 10px;
  }

  .con-box span {
    color: #eed4b1;
  }

  .con-box button {
    margin-top: 3%;
    background-color: #fff;
    color: #f8c27f;
    border: 1px solid #fcead5;
    padding: 6px 10px;
    border-radius: 5px;
    letter-spacing: 1px;
    outline: none;
    cursor: pointer;
  }

  .con-box button:hover {
    background-color: #fda331;
    color: #fff;
  }
</style>